<template>
  <!-- 自定义输入框组件 （貌似没有什么用 哈哈哈 希望以后有用叭） -->
  <input
    :placeholder="placeholder"
    type="text"
    v-model="value"
    @keyup="keyupHandler"
  />
</template>

<script>
export default {
  name: "CustomInput",
  /* 提示内容 */
  props: ["placeholder"],
  data() {
    return {
      value: "",
    };
  },
  methods: {
    /* input框 输入业务处理 */
    keyupHandler() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$emit("keyup", this.value);
      }, 300);
    },
  },
};
</script>

<style lang="less" scoped>
input {
  height: 0.7rem;
  outline: none;
  border: 0;
  padding: 0.05rem 0;
  padding-left: 0.1rem;
  background-color: rgba(103, 103, 103, 0.5);
  color: #fff;
  padding: 0.1rem;
  padding-left: 0.2rem;
  border-radius: 0.05rem;
  &:focus {
    background-color: rgba(103, 103, 103, 0.8);
  }
}
</style>